<template>
  <div class="flex-1 flex-column" style="background-color: white;margin: 24px;padding: 20px 0">
    <div class="flex-column" style="margin: 0 32px">
      <span class="detail-title">基本信息</span>
      <a-divider style="margin: 15px 0"/>
    </div>
    <div class="flex-column" style="width: 100%;margin-top: 20px">
      <a-row type="flex" justify="center" style="width: 100%">
        <m-col-v>
          <m-form-v :form="form" @submit="handleSubmit">
            <a-form-item label="分组名称">
              <a-input placeholder="请输入分组名称"
                       v-decorator="['patrolName', { rules: [{ required: true, message: '请输入分组名称!' }] }]"
                       :allowClear="true"/>
            </a-form-item>
            <a-form-item label="分组类型">
              <a-radio-group v-decorator="['type', {initialValue: 1, rules: [{ required: true}]}]"
                            style="width: 100%;">
                <a-radio :value="1">固定商品</a-radio>
                <a-radio :value="0">可选商品</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="限购份数">
              <a-input-number placeholder="请输入限购份数"  v-decorator="['peer', { rules: [{ required: true, message: '请输入限购份数!' }] }]" :allowClear="true"/>
            </a-form-item>
            
            <!-- <a-form-item label="同一商品可点多份">
              <a-radio-group v-decorator="['signeMore', {initialValue: 1, rules: [{ required: true}]}]" style="width: 100%;">
                <a-radio :value="1">固定商品</a-radio>
                <a-radio :value="0">可选商品</a-radio>
              </a-radio-group>
            </a-form-item> -->

             <a-form-item label="同一商品可点多份">
              <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
            </a-form-item>
                  
            <a-form-item label="资产类型">
              <a-select mode="multiple" placeholder="请选择资产类型"
                        v-decorator="['assetTypes', { rules: [{ required: true, message: '请选择资产类型!'}] }]"
                        option-filter-prop="children" show-search>
                <template v-for="item in assetTypeList">
                  <a-select-option :key="item.DATA_ID" :value="item.DATA_ID">
                    {{ item.CLASS_VALUE }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
           
            <a-form-item label="备注">
              <a-textarea placeholder="请输入备注" v-decorator="['remark', { rules: [{ required: false}]}]"
                          :allowClear="true" :auto-size="{ minRows: 1}"/>
            </a-form-item>

            <div class="flex-row-center" style="height: 50px;margin-top: 30px;width: 100%;justify-content: center">
              <a-button  @click="back" style="margin-right: 15px">
                取消
              </a-button>
              <a-button type="primary" html-type="submit">
                保存
              </a-button>
            </div>
          </m-form-v>
        </m-col-v>
      </a-row>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      data: null,
      span: 11,
      form: this.$form.createForm(this, {name: 'form'}),
      typeList: [],
      upDownList: [{DATA_ID: 0, CLASS_VALUE: '全部'}, {DATA_ID: 1, CLASS_VALUE: '上行'}, {DATA_ID: 2, CLASS_VALUE: '下行'}],
      routeList: [],
      assetTypeList: [],
      sectionList: [],
      companyList: [],
      personList: [],
    }
  },
  mounted() {
    let self = this;
    let isAdd = false;
    if (this.$route.query.patrolId) {
      this.$util.showLoading(self);
      this.$util.get('ajaxPatrolInfo?patrolId=' + this.$route.query.patrolId, {}, true).then((res) => {
        self.bean = res.content;
        self.$util.hideLoading();
        let dao = res.content;

        self.$util.get('ajaxSectionList', {routeId: dao.ROUTE_ID}).then((res1) => {
          self.sectionList = res1.content;

          self.$util.get('ajaxUserList', {
            companyId: dao.COMPANY_ID,
            authAction: 'submitWorksheet',
            isUse: 1
          }).then((res2) => {
            self.personList = res2.content;


            let sectionIds = dao.SECTION_IDS ? dao.SECTION_IDS.split(",") : [];
            let sectionIds_ = [];
            for (let i = 0; i < sectionIds.length; i++) {
              sectionIds_.push(parseInt(sectionIds[i]));
            }


            let assetTypes = dao.ASSET_TYPES ? dao.ASSET_TYPES.split(",") : [];
            let assetTypes_ = [];
            for (let i = 0; i < assetTypes.length; i++) {
              assetTypes_.push(parseInt(assetTypes[i]));
            }
            self.form.setFieldsValue({
              patrolName: dao.PATROL_NAME,
              planType: dao.PLAN_TYPE,
              routeId: dao.ROUTE_ID,
              upDown: dao.UP_DOWN ? dao.UP_DOWN : 0,
              executorId: dao.EXECUTOR_ID,
              endDate: dao.END_DATES,
              assetTypes: assetTypes_,
              sectionIds: sectionIds_,
              peer: dao.PEER,
              remark: dao.REMARK,
              companyId: dao.COMPANY_ID,
            })
          })
        })


      })
    } else {
      isAdd = true;
      self.form.setFieldsValue({
        upDown: 0,
        endDate: moment().add(1, 'days').format(self.$util.dateFormatStr.dateYMD2)
      })
    }

    this.$util.get('ajaxDataList', {classType: 'PLAN_TYPE', isShow: 1}).then((res) => {
      this.typeList = res.content;
      if (isAdd) {
        self.form.setFieldsValue({
          planType: this.typeList[0].DATA_ID,
        })
      }
    })

    this.$util.get('ajaxShortRouteList').then((res) => {
      this.routeList = res.content;
    })

    this.$util.get('ajaxCompanyList', {isOut: 0}).then((res) => {
      this.companyList = res.content;
    })

    this.$util.get('ajaxDataList', {classType: 'ASSETS_TYPE', isShow: 1}).then((res) => {
      this.assetTypeList = res.content;
      if (isAdd) {
        let assetTypes = [];
        for (let i = 0; i < this.assetTypeList.length; i++) {
          assetTypes.push(this.assetTypeList[i].DATA_ID)
        }
        self.form.setFieldsValue({
          assetTypes: assetTypes
        })
      }
    })
  },

  methods: {
    handleSubmit(e) {
      e.preventDefault();
      let self = this;

      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let p = {
            action: "ADD",
            patrolName: values.patrolName,
            planType: values.planType,
            routeId: values.routeId,
            upDown: values.upDown,
            executorId: values.executorId,
            endDate: values.endDate,
            assetTypes: values.assetTypes,
            sectionIds: values.sectionIds,
            peer: values.peer,
            remark: values.remark,
          }

          if (this.bean) {
            p.action = 'EDIT';
            p.patrolId = this.bean.PATROL_ID;
          }
          this.$util.post('submitPatrol', p).then((res) => {
            self.back();
          });
        }
      });
    },
    back() {
      this.$router.back();
    },
    routeChange(value) {
      let self = this;
      this.form.setFieldsValue({
        sectionIds: undefined,
      })
      this.$util.get('ajaxSectionList', {routeId: value}).then((res) => {
        self.sectionList = res.content;
      })
    },
    companyChange(value) {
      let self = this;
      this.form.setFieldsValue({
        executorId: undefined
      })
      this.$util.get('ajaxUserList', {companyId: value, authAction: 'submitWorksheet', isUse: 1}).then((res) => {
        self.personList = res.content;
      })
    }
  }
}
</script>

<style scoped>

</style>
